<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="change">修改姓名</button>
    <p>{{$store.state.name}}</p>
    <button @click="changeGetName">修改获得的姓名</button>
    <p>{{aaa}}</p>
    <button @click="changeAgeMethod">修改年龄</button>
    <p>{{age}}</p>
    <p>我的名字是：{{$store.state.info.name}}</p>
  </div>
</template>
<script>
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'
  export default {
    data(){
      return {
        aaa: '',
      }
    },
    computed:{
      ...mapState(['name','age']),
      ...mapGetters(['getName'])
    },
    methods: {
      ...mapMutations(['changeName','changeAge']),
      // ...mapActions(['asyncChange']),
      change() {
        // this.$store.commit('changeName');
        // this.asyncChange();
        this.$store.dispatch('asyncChange');
      },
      changeGetName() {
        this.aaa += this.getName;
      },
      changeAgeMethod() {
        this.changeAge(10);
      }
    },
  }
</script>
